<template>
    <div>
        <div @click="getDetail">
            <slot></slot>
        </div>
        <el-dialog class="dialog" title="考勤详情" v-model="visible" append-to-body>
            <div class="info">
                <div>
                    <div class="label">姓名</div>
                    <div>{{ props.row.name }}</div>
                </div>
                <div>
                    <div class="label">出勤天数</div>
                    <div>{{ props.row.workNum }}</div>
                </div>
                <div>
                    <div class="label">异常天数</div>
                    <div>{{ props.row.warningNum }}</div>
                </div>
            </div>
            <el-calendar class="el-calendar" :range="dateRange">
                <template #date-cell="{ data }">
                    <div
                      class="dateDay"
                      :class="{
                        'notMoth' : data.date.getMonth() !== dateRange[0].getMonth(),
                        'warning' : getType(data.date) === '缺卡',
                        'plan' : getType(data.date) === '无记录'
                      }">
                        <div class="top">
                            <div class="time">{{ data.date.getDate() }}</div>
                            <div class="type"
                              v-if="data.date.getMonth() === dateRange[0].getMonth()
                              && warningInfo[data.date.getDate()]"
                            >{{
                                getType(data.date)
                            }}</div>
                        </div>
                        <div class="recordTime"
                          v-if="data.date.getMonth() === dateRange[0].getMonth()
                          && warningInfo[data.date.getDate()]"
                        >
                            <div
                              v-for="[key,value] in Object.entries(warningInfo[data.date.getDate()])"
                              :key="value"
                            >
                                <span v-if="!!value">{{
                                    {'first':'上午', 'middle':'中午', 'end':'下午'}[key]
                                }} :{{ value }}
                                </span>
                            </div>
                        </div>
                    </div>
                </template>
            </el-calendar>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { timeScope } from '@/utils/tools'
// 人员信息
interface Person {
    // 姓名
    name:string,
    // id
    id:string,
    // 部门
    department:string,
    // 考勤日期
    workDates:Array<string> | [],
    // 考勤天数
    workNum:number,
    // 异常天数
	warningNum:number,
}
const props = defineProps<{
    row:Person,
    dateRange:Array<string>
}>()
const visible:Ref<boolean> = ref(false)
// 异常天
const warningInfo:Ref<Record<number, { first:string, middle:string, end:string }>> = ref({})
const getDetail = ()=>{
    visible.value = true
    getWarningInfo()
}
// 时间范围
const dateRange:Ref<[Date,Date]> = ref(props.dateRange.map(item=>new Date(item)) as [Date,Date])

const getWarningInfo = ()=>{
    // @ts-ignore
    warningInfo.value = props.row.workDates.reduce((
        pre:Record<number,any>,
        { recordTime } : Record<string,Array<string>>,
        index:number,
    )=>{
        const keys = {
            '上午':'first',
            '中午':'middle',
            '下午':'end',
        }
        for (const val of Object.entries(keys)){
            pre[index+1] ||= {}
            pre[index+1][val[1]] = ''
        }
        if(!recordTime) return pre
        const list= [...new Set([recordTime[0] , recordTime.at(-1)])] as Array<string>
        list.forEach(item=>{
            pre[index+1][keys[timeScope(item)]] = item
        })
        return pre
    },{} as Record<number,any>)
    console.log(warningInfo.value);
}

// 获取异常信息
const getType = (date:Date)=>{
    if(!warningInfo.value[date.getDate()]) return '正常'
    const timer = Object.values(warningInfo.value[date.getDate()]).filter(item=>item).length
    return {
        0:'无记录',
        1:'缺卡',
        2:'正常'
    }[timer]
}

</script>

<style scoped lang="scss">
.info{
    display: flex;
    font-size:15px;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
    >div{
        display: flex;
        text-align: center;
        justify-content: center;
        width: 30%;
        .label{
            font-weight: 700;
            &::after{
                content: '：';
            }
        }
    }
}
.dateDay{
    width: 100%;
    height: 100%;
    pointer-events:all;
    padding: 5px;
    &.notMoth{
        opacity: 0.1;
        &:hover{
            background-color: none;
        }
    }
    &.warning:not(.notMoth){
        background-color: rgb(252, 225, 225);
    }
    &:not(.warning){
        .recordTime{
            transition: all 0.2s;
            opacity: 0;
        }
        &:hover{
            .recordTime{
                opacity: 1;
            }
        }
    }
    &.plan{
        .top{
            opacity: .6;
        }
    }
    .recordTime{
        padding-top: 5px;
    }
    .top{
        display: flex;
        justify-content: space-between
    }
}
::v-deep.dialog .el-dialog{
    margin-top: 10vh !important;
    background-color: red;
}
::v-deep.el-calendar .el-calendar__body .el-calendar-table__row {
    .el-calendar-day{
        padding: 0;
    }
    .current.is-selected .el-calendar-day{
        .dateDay{
            .recordTime{
                opacity: 1;
            }
        }
    }
}
</style>